<template>
    <div id="My-Bottom-Gunhua">
        <div id="My-Bottom-Content">
            <div id="My-BotGun-title">
                <img :src="this.$store.state.My.Quanzi.titimg" alt="">
                <h2>{{this.$store.state.My.Quanzi.name}}</h2>
                <span>去圈子广场&nbsp;&nbsp;&nbsp;&nbsp;＞</span>
            </div>
            <div id="My-BotGun-text">
                <p v-for="(v) in this.$store.state.My.Quanzidata" :key="v.id">
                    <img :src="v.img" alt="">
                    <span>{{v.name}}</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "question"
    }
</script>

<style lang="scss" scoped>
    #My-Bottom-Gunhua {
        background-color: #FFFFFF;
        margin-bottom: 0.08rem;

        #My-Bottom-Content {
            /*padding: 0.16rem 0.15rem 0.15rem 0.15rem;*/
        }
    }

    #My-BotGun-title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding: 0.16rem 0.15rem 0 0.15rem;

        img{
            width: 0.2rem;
            vertical-align: middle;
        }

        h2{
            margin-left: 0.04rem;
            font-size: 0.14rem;
            color: #202020;
        }
        span{
            font-size: 0.12rem;
            color: #6e6e6e;
            position: absolute;
            right: 0.09rem;
        }
    }

    #My-BotGun-text{
        /*width: 2.92rem;*/
        /*height: 1.04rem;*/
        margin-top: 0.2rem;
        position: relative;
        padding-bottom: 0.18rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        /*隐藏滚动条开始*/
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        overflow-y: hidden;
        overflow: -moz-scrollbars-none;
        overflow: -moz-scrollbars-none;
        /*隐藏滚动条结束*/

        p{
            width: 0.54rem;
            display: flex;
            margin-right: 0.2rem;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            img{
                width:0.54rem
            }
            span{
                display: block;
                width:0.54rem;
                height: 0.43rem;
                font-size: 0.13rem;
                color: #292929;

            /*内容超出显示省略号,多行文本显示省略号*/
                white-space: normal;
                overflow: hidden;
                word-wrap: break-word; /* 允许长单词换行到下一行  */
                text-overflow: ellipsis;
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:2; /* 2是设置显示2行 */

            }
        }

        p:nth-of-type(1){
            margin-left: 0.14rem;
        }
        p:nth-last-child(1){
            padding-right: 0.2rem;
        }

    }
    #My-BotGun-text::-webkit-scrollbar{
        display: none;
    }
</style>